{include file='public/header' /}

<body>

    <div class="layui-fluid">

        <div class="layui-row">

            <form class="layui-form " enctype="multipart/form-data" id="file" style="margin: 50px;">

            <input type="hidden" name="id" value="{$info.id}">


             <div class="layui-form-item" style="margin-top: 50px;">

                    <fieldset class="layui-elem-field" style="padding: 20px;">

                     <legend>轮播图信息</legend>

                    <div class="layui-input-inline" id="demo3" style="width:auto;">
                      {if !empty($info.banner)}
                      {foreach $info.banner as $k => $v}
                          <div class="layui-input-inline" style="width:280px;"><div class="layui-upload-drag"><p onclick="hover_del(this)">删除</p><div><hr><img class="inputs-img" src="{$v}" style="max-width: 196px; max-height: 124px;"></div></div>

                          <input class="inputs" type="hidden" readonly="readonly" name="imgs[]" value="{$v}">

                        </div>
                      {/foreach}
                      {/if}
                        
                    </div>


                      <div class="layui-input-inline" style="width:280px;">
                         <div class="layui-form-item" id="imgdiv">
                                <div class="layui-upload-drag" id="test3">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">轮播图上传</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  
                                </div>
                         </div>
                      </div>
                      
                 </fieldset>     
              </div>

            <div class="layui-form-item" style="margin-top: 50px;">
              <fieldset class="layui-elem-field" style="padding: 20px;">

                     <legend>图片信息</legend>

                      <div class="layui-input-inline" style="width:280px;">
                        <input type="hidden" name="fwys" value="{$info.fwys}">
                         <div class="layui-form-item" id="imgdiv">
                                <div class="layui-upload-drag" id="test10">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">服务优势</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  <div id="uploadDemoView">
                                    <hr>
                                    <img src="{$info.fwys}" alt="上传成功后渲染" style="max-width: 196px">
                                  </div>
                                </div>
                         </div>
                      </div>


                       <div class="layui-input-inline" style="width:280px;">
                          <input type="hidden" name="jcyq" value="{$info.jcyq}">
                           <div class="layui-form-item" id="imgdiv1">
                                  <div class="layui-upload-drag" id="test11">
                                    <i class="layui-icon"></i>
                                    <p style="color:#009688; font-weight: bold;">专业检测仪器</p>
                                    <hr>
                                    <p>点击上传，或将文件拖拽到此处</p>
                                    <div id="uploadDemoView1">
                                      <hr>
                                      <img src="{$info.jcyq}" alt="上传成功后渲染" style="max-width: 196px">
                                    </div>
                                  </div>
                           </div>
                      </div>


                       <div class="layui-input-inline" style="width:280px;">
                         <input type="hidden" name="jcxm" value="{$info.jcxm}">
                         <div class="layui-form-item" id="imgdiv2">
                                <div class="layui-upload-drag" id="test12">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">检测项目</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  <div id="uploadDemoView2">
                                    <hr>
                                    <img src="{$info.jcxm}" alt="上传成功后渲染" style="max-width: 196px">
                                  </div>
                                </div>
                         </div>
                      </div>


                     <div class="layui-input-inline" style="width:280px;">
                        <input type="hidden" name="fwlc" value="{$info.fwlc}">
                         <div class="layui-form-item" id="imgdiv3">
                                <div class="layui-upload-drag" id="test13">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">服务流程</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  <div id="uploadDemoView3">
                                    <hr>
                                    <img src="{$info.fwlc}" alt="上传成功后渲染" style="max-width: 196px">
                                  </div>
                                </div>
                         </div>
                      </div>

                  </fieldset>    
            </div>




          <div class="layui-form-item" style="margin-top: 50px;">
              <fieldset class="layui-elem-field" style="padding: 20px;">

                     <legend>检测报告封面、页尾</legend>

                      
                      <div class="layui-input-inline" style="width:280px;">
                        <input type="hidden" name="header" value="{$info.header}">
                         <div class="layui-form-item" id="imgdiv5">
                                <div class="layui-upload-drag" id="test15">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">检测报告封面</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  <div id="uploadDemoView5">
                                    <hr>
                                    <img src="{$info.header}" alt="上传成功后渲染" style="max-width: 196px">
                                  </div>
                                </div>
                         </div>
                      </div>


                      <div class="layui-input-inline" style="width:280px;">
                        <input type="hidden" name="footer" value="{$info.footer}">
                         <div class="layui-form-item" id="imgdiv4">
                                <div class="layui-upload-drag" id="test14">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">检测报告页尾</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  <div id="uploadDemoView4">
                                    <hr>
                                    <img src="{$info.footer}" alt="上传成功后渲染" style="max-width: 196px">
                                  </div>
                                </div>
                         </div>
                      </div>



                       <div class="layui-input-inline" style="width:280px;">
                        <input type="hidden" name="chapter" value="{$info.chapter}">
                         <div class="layui-form-item" id="imgdiv6">
                                <div class="layui-upload-drag" id="test16">
                                  <i class="layui-icon"></i>
                                  <p style="color:#009688; font-weight: bold;">检测报告公章</p>
                                  <hr>
                                  <p>点击上传，或将文件拖拽到此处</p>
                                  <div id="uploadDemoView6">
                                    <hr>
                                    <img src="{$info.chapter}" alt="上传成功后渲染" style="max-width: 196px">
                                  </div>
                                </div>
                         </div>
                      </div>
                  </fieldset>    
            </div>


              
            <div class="layui-form-item">
                <button class="layui-btn" id="submitBtn" lay-filter="add" lay-submit="" type="submit">
                    更新图片
                </button>
            </div>

            </form>
           

        </div>

    </div>

   
    <script>
        layui.use('upload', function(){
          var $ = layui.jquery
          ,upload = layui.upload;
                
                //拖拽上传 服务优势
                upload.render({
                  elem: '#test10'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='fwys']").val(res.data.src); 
                      }
                });


                 //拖拽上传 检测仪器
                upload.render({
                  elem: '#test11'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView1').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='jcyq']").val(res.data.src); 
                      }
                });



                 //拖拽上传 检测项目
                upload.render({
                  elem: '#test12'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='jcxm']").val(res.data.src); 
                      }
                });


                 //拖拽上传 服务流程
                upload.render({
                  elem: '#test13'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView3').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='fwlc']").val(res.data.src); 
                      }
                });


                 //拖拽上传 页尾
                upload.render({
                  elem: '#test14'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView4').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='footer']").val(res.data.src); 
                      }
                });



                 //拖拽上传 封面
                upload.render({
                  elem: '#test15'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView5').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='header']").val(res.data.src); 
                      }
                });



                  //拖拽上传 公章
                upload.render({
                  elem: '#test16'
                  ,url: '{:url("uploadfile/getfile")}' //改成您自己的上传接口
                  ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                      layui.$('#uploadDemoView6').removeClass('layui-hide').find('img').attr('src', result);
  
                    });
                  }   
                   ,done: function(res){
                          $("input[name='chapter']").val(res.data.src); 
                      }
                });




                
                //多图片上传
                upload.render({
                    elem: '#test3'
                    ,url: "{:url('uploadfile/getfile')}" //改成您自己的上传接口
                    ,multiple: false
                    ,before: function(obj){
                            
                            obj.preview(function(index, file, result){
                                $('#demo3').append('<div class="layui-input-inline" style="width:280px;"><div class="layui-upload-drag"><p onclick="hover_del(this)">删除</p><div><hr><img class="inputs-img" src="'+ result +'" style="max-width: 196px; max-height: 124px;"></div></div></div>')
                            });
                        
                    }
                    ,done: function(res){
                        var count = $(".inputs").length;
                        console.log(res)
                        console.log(count)
                        //上传完毕
                        var index = $(this).index()
                        $('#demo3').children().eq(index).append('<input class="inputs" type="hidden" readonly="readonly" name="imgs['+count+']" value="'+res.data.src+'">')
                
                    }
                });

          });



        //删除图片代码:
        function hover_del(obj){
            $(obj).parent().parent().remove();
            var len = $('.inputs').length;
            for (var i = 0; i < len; i++) {
                $('.inputs').eq(i).attr('name', 'imgs['+i+']');
            }
            layer.msg('删除成功');
        }

    </script>



<script>

  fileEle = document.getElementById('file');

  arr = [];

  //把value的值拿出来

  valEle = '';

  nulEle = '';


  $("#file").on("submit",function(){

    //阻止form默认提交

    var evt = event;

    evt.preventDefault();

    

    //得到formData

    var formData = new FormData($(this)[0]);


    // $("#submitBtn").attr("disabled","disabled");


    $.ajax({

      url:"{:url('Images/index')}",

      type:"post",

      async: false,

      cache: false,

      contentType: false,

      processData: false,

      data:formData,

      success:function(data){

        console.log(data);

        if (data == 1) {

          layer.msg('更新成功', {icon: 1,time: 1500});

          setTimeout(function(){
            //刷新父页面
            window.location.reload(); 
            

          },1500);

        }else{

          layer.msg('更新失败', {icon: 2,time: 1500});


        }

        

      }

    })

  })

    </script>

</body>

